<template>
  <div style="height:86%" class="card-wrapper m-t-xs f14">
    <div v-if="tableData.dataSource.length>0" class="w-full h-full">
      <div class="card-content w-full">
        <div @dblclick="enterDetail(item)" v-for="item in tableData.dataSource" :key="item.id" class="item m-r-md m-b-xs">
          <div class="top w-full">
            <div class="f16 font-bold h-full" style="display:flex">
              <svg class="icon svg-icon f18 m-r-xs m-t-xs" aria-hidden="true">
                <use xlink:href="#icon-project-before"></use>
              </svg>
              <span :title="item.projectName||item.xmmc||item.XMMC" class="h-full name">
                {{ item.projectName||item.xmmc||item.XMMC }}
              </span>
              <div class="h-full tip">
                <span class="flow f12 font-normal m-r-xs m-l-md">
                  {{ item.activityName||item.ACTIVITYNAME||item.TJHJ||item.F_LIFESTATE||item.CURRENTACTIVITYNAME }}
                </span>
                <span v-if="item.isDown == 'down'" title="正常">
                  <svg class="icon svg-icon f19" aria-hidden="true">
                    <use xlink:href="#icon-success"></use>
                  </svg>&nbsp;
                </span>
                <span v-else-if="item.isDown == 'todo'" title="超期">
                  <svg class="icon svg-icon f19" aria-hidden="true">
                    <use xlink:href="#icon-warning"></use>
                  </svg>&nbsp;
                </span>
                <span v-if="item.isDown == 'do'" title="预警">
                  <svg class="icon svg-icon f19" aria-hidden="true">
                    <use xlink:href="#icon-tip"></use>
                  </svg>&nbsp;
                </span>
                <span :title="(item.collect===0?'收藏':'取消收藏')">
                  <a-rate v-model="item.collect" :count="collectRateNum" @change="projectCollect (item)"/>
                </span>
              </div>
            </div>
          </div>
          <div class="bottom w-full">
            <span class="f14 font-normal">行政区：{{ item.XMWZ }}</span>
            <span class="f14 font-normal">业务类型：{{ item.businessName||item.BUSINESSNAME }}</span>
            <span class="f14 font-normal">申报时间：{{ item.receiveDate||item.TJSJ||item.collectTime }}</span>
            <span class="f14 font-normal">剩余时间：{{ item.PROJECT_DUETIME }}</span>
          </div>
          <div v-if="item.taskStatus" class="right-icon">
            <svg class="icon svg-icon f40" aria-hidden="true">
              <use xlink:href="#icon-read"></use>
            </svg>
          </div>
        </div>
      </div>
      <div style="justify-content: space-between;" class="flex-y-center">
        <span>
          共{{ tableData.pagination.total }}条数据
        </span>
        <a-pagination
          v-model="tableData.pagination.current"
          :page-size-options="tableData.pagination.pageSizeOptions"
          :total="tableData.pagination.total"
          show-size-changer
          :page-size="tableData.pagination.pageSize"
          @change="tableData.pagination.onChange"
          @showSizeChange="tableData.pagination.onShowSizeChange"
        >
        </a-pagination>
      </div>
    </div>
    <div class="w-full h-full display-flex" v-else>
      <a-empty />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CardPattern',

    data () {
      return {

      }
    },

    props: {
      filter: {
        type: Object,
        default: () => {}
      },
      tableData: {
        type: Object,
        default: () => {}
      },
      collectRateNum: {
        type: Number,
        default: () => 0
      }
    },

    mounted () {
    },

    methods: {
      enterDetail (item) {
        this.$emit('enterDetail', item)
      },
      projectCollect (item) {
        this.$emit('projectCollect', item)
      }
    }
  }
</script>

<style lang="less" scoped>
  .card-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    color: #666;

    .card-content {
      display: flex;
      flex-wrap: wrap;

      .item {
        width: calc((100% - 60px) / 4);
        height: 222px;
        background: #f9fafb;

        .top {
          padding: 12px 14px 13px 14px;
          height: 78px;
          background: #f0f2f4;

          .name {
            color:#333;
            width:55%;
            line-height: 25px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;
          }

          .tip {
            width:40%;
            display:flex;
            align-items:flex-end;
            justify-content: flex-end;

            .flow {
              display: inline-block;
              background: rgba(230,148,0,0.1);
              padding: 3px 10px;
              color: #e69400;
              border-radius: 2px;
            }
          }
        }

        .bottom {
          padding: 12px 14px 20px 14px;

          span {
            display: block;
            line-height: 20px;
            margin-bottom: 10px;
          }

          span:nth-child(4n) {
            margin-bottom: 0;
          }
        }

        .right-icon {
          width: 40px;
          height: 40px;
          position: relative;
          right: -360px;
          bottom: -182px;
        }

        .f40 {
          font-size: 40px;
        }

        &:hover {
          cursor: pointer;

          .top {
            background: #E7EFFA;
            transition: linear .2s;

            div {
              span:last-child {
                transition: linear .2s;
                color: #2BAEF2 !important;
              }
            }
          }
        }
      }

      div:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
</style>
